<div>
    <div class="row">
        <div class="col-md-2 bg-white">
            <div class="margin-sm">选择商品</div>
            <div class="flex justify-start">
                <div v-for="reserveDining in doDiningInfo.reserveDinings">
                    <div class="vc-border border-radius padding-xs " :class="{'vc-reserve-active':doDiningInfo.goodsId == reserveDining.goodsId}" @click="_chooseDining(reserveDining)">
                        <div v-if="reserveDining.imgUrl">
                            <img style="width: 60px; height: 60px; border-radius: 5px;" v-bind:src="reserveDining.imgUrl"></img>
                        </div>
                        <div v-else>
                            <img style="width: 60px; height: 60px; border-radius: 5px;" src="/img/noPhoto.jpg">
                        </div>
                        <div class="text-center margin-top-xs">
                            {{reserveDining.goodsName}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-lg-3">
                </div>
                <div class="col-lg-5">
                    <input class="form-control" id="qrCode" placeholder="请用扫码枪扫二维码" v-model="doDiningInfo.qrCode" @keyup.enter="_doDining()" />
                </div>
                <div class="col-lg-1 padding-lr-0 ">
                    <button type="button" class="form-control btn btn-primary" @click="_doDining()">
                        <vc:i18n name="就餐" namespace="simplifyAcceptance"></vc:i18n>
                    </button>
                </div>
            </div>

            <div class="row margin-top">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <vc:i18n name="就餐记录" namespace="doDining"></vc:i18n>
                            </h5>
                            <div class="ibox-tools" style="top:10px;">

                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-2">
                                    <div class="form-group input-group">
                                        <input type="text" :placeholder="vc.i18n('请选择开始时间','doDining')" v-model="doDiningInfo.conditions.startDate" class=" form-control startDate">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group input-group">
                                        <input type="text" :placeholder="vc.i18n('请选择结束时间','doDining')" v-model="doDiningInfo.conditions.endDate" class=" form-control endDate">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请输入业主名称','doDining')" v-model="doDiningInfo.conditions.nameLike" class=" form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请输入就餐人','doDining')" v-model="doDiningInfo.conditions.nameLike" class=" form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-primary btn-sm" v-on:click="_queryData()">
                                        <i class="glyphicon glyphicon-search"></i> <span>
                                            <vc:i18n name="查询"></vc:i18n>
                                        </span>
                                    </button>
                                    <button type="button" class="btn btn-white btn-sm" v-on:click="_exportExcel()">
                                        <i class="glyphicon glyphicon-search"></i> <span>
                                            <vc:i18n name="导出"></vc:i18n>
                                        </span>
                                    </button>
                                </div>
                            </div>
                            <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                <thead>
                                    <tr>
                                        <th class="text-center">
                                            就餐时间
                                        </th>

                                        <th class="text-center">
                                            商品
                                        </th>
                                        <th class="text-center">
                                            业主
                                        </th>
                                        <th class="text-center">
                                            就餐人
                                        </th>
                                        <th class="text-center">
                                            就餐电话
                                        </th>
                                        <th class="text-center">
                                            订单编号
                                        </th>
                                        <th class="text-center">
                                            备注
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in doDiningInfo.orders">
                                        <td class="text-center">
                                            {{item.createTime}}
                                        </td>

                                        <th class="text-center">
                                            {{item.goodsName}}
                                        </th>
                                        <td class="text-center">
                                            {{item.ownerName}}
                                        </td>
                                        <td class="text-center">
                                            {{item.personName}}
                                        </td>
                                        <td class="text-center">
                                            {{item.personTel}}
                                        </td>
                                        <td class="text-center">{{item.orderId}}</td>
                                        <td class="text-center">
                                            {{item.remark}}
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="7">
                                            <ul class="pagination float-right"></ul>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                            <!-- 分页 -->
                            <vc:create path="frame/pagination"></vc:create>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <vc:create path="reserve/addReserveDiningPerson"></vc:create>
        <vc:create path="reserve/deleteReserveDining"></vc:create>


    </div>